<template>
  <div class="select-template-wrapper">
    <span class="search-condition-item-label" :title="attr.title">{{
      attr.title ? attr.title : ''
    }}</span>
    <div class="search-condition-item-widget">
      <TreeSelect
        :type="attr.extra.type"
        :data="value"
        :allCount="attr.extra.allCount"
        @triggerValueChange="triggerValueChange"
        ref="scTransferTree"></TreeSelect>
    </div>
  </div>
</template>

<script>
  import TreeSelect from '@/components/search-condition/widgets/sc-tree-select/tree-select.vue';

  export default {
    name: 'ScTreeSelect',
    components: { TreeSelect },
    props: {
      attr: {
        type: Object,
        default: () => {}
      },
      value: {
        type: Object,
        default: () => {}
      }
    },
    methods: {
      triggerValueChange(data) {
        this.$emit('valueChange', {
          key: this.attr.key,
          value: data && Object.keys(data).length > 0 ? data : null
        });
      }
    }
  };
</script>
